﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery Form</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
    
    <script src="../../../scripts/boot.js" type="text/javascript"></script> 
    
    <script src="jquery.form.js" type="text/javascript"></script>
    
    
</head>
<body>
    <h1>jquery Form</h1>      
        
                
<form id="myForm" action="Default.jsp" method="post"> 
    <table>
        <tr>
            <td><label for="username$text">帐号：</label></td>
            <td>
                <input name="username" vtype="email" class="mini-textbox" required="true" requiredErrorText="帐号不能为空"/>
                
            </td>    
        </tr>
        <tr>
            <td><label for="pwd$text">密码：</label></td>
            <td>
                <input name="pwd" class="mini-password" vtype="minLength:5" required="true" minLengthErrorText="密码不能少于5个字符" />

            </td>
        </tr>            
        <tr>
            <td></td>
            <td>
                <input value="Login" type="button" onclick="submitForm()" />
            </td>
        </tr>
    </table>
</form>

    
    <script type="text/javascript">
        mini.parse();

        function submitForm() {

            $('#myForm').ajaxSubmit({
                beforeSubmit: function () {
                    var form = new mini.Form("#myForm");
                    form.validate();
                    if (form.isValid() == false) return false;
                    return true;
                },
                success: function () {
                    alert("Thank you for your comment!");
                }
            }); 
        }

    </script>

    <div class="description">
        <h3>Description</h3>
        <p>
            监听处理表单控件的"validation"事件。在此验证事件函数中，可以对控件值做任意逻辑规则的验证。
        </p>
        <p>使用Form控件的validate方法，可以对表单元素之内的所有控件进行批量验证。</p>
    </div>
</body>
</html>